import { useState } from "react";
import { createRoot } from "react-dom/client";

import LicenseKeyboard from "./index";
import "./style.scss";
import { Input} from "antd-mobile";


function App() {
  const [showKeyboard, setShowKeyboard] = useState(false);
  const [value, setValue] = useState("");

  const toggleKeyboard = () => {
    setShowKeyboard(!showKeyboard);
  };


  return (
    <div>
      {/* <button
        data-test-id="controlButton"
        onClick={() => setShowKeyboard(!showKeyboard)}
      >{`${showKeyboard ? "close" : "open"} the keyboard`}</button> */}
      <Input
        placeholder="请输入车牌号"
        // onClick={() => setShowKeyboard(!showKeyboard)}
        onClick={toggleKeyboard}
      />
      <p data-test-id="value">{value}</p>

      <LicenseKeyboard
        visible={showKeyboard}
        done={() => setShowKeyboard(false)}
        onChange={(value: any) => setValue(value)}
        value={value}
      />
    </div>
  );
}

const container = document.getElementById("root");
const root = createRoot(container!);
root.render(<App />);
// root.render(<App onChange={handleInputChange} />);
export default App;